<!-- 新增AVL厂商弹窗 -->
<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" :title="typeTitle" width="1000px" @open="openDialog" @close="closeDialog">
    <px-form ref="formRef" :model="formValue" :rules="rules" label-position="right" label-width="120px">
      <px-row>
        <px-col :span="12">
          <px-form-item label="名称" prop="name">
            <px-input v-model="formValue.name" placeholder="请输入名称" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="AVL NO." prop="avlNo">
            <px-input v-model="formValue.avlNo" placeholder="请输入AVL NO" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="联系人" prop="contact">
            <px-input v-model="formValue.contact" placeholder="请输入联系人" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="电话" prop="phone">
            <px-input v-model="formValue.phone" placeholder="请输入电话" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="邮箱" prop="email">
            <px-input v-model="formValue.email" placeholder="请输入邮箱" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="24">
          <px-form-item label="服务内容" prop="address">
            <px-input v-model="formValue.address" placeholder="请输入服务内容" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="24">
          <px-form-item label="备注" prop="remark">
            <px-input
              v-model="formValue.remark"
              style="width: 100%"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 6 }"
              placeholder="请输入备注"
              maxlength="1000"
              show-word-limit
            />
          </px-form-item>
        </px-col>
      </px-row>
    </px-form>
    <div style="margin-top: 56px; text-align: right">
      <px-button @click="closeDialog">取消</px-button>
      <px-button type="primary" @click="handleSubmit(formRef)">保存</px-button>
    </div>
  </px-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, ref, toRefs } from "vue";
import { PxMessage } from "px-ui";
import { addMaterialSupplier, updateMaterialSupplier } from "@/api/erc/material";

// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["dialogVisible", "drawerType", "rowData"]);

const visible = computed(() => props.dialogVisible);
// 页面本身的值
const formRef = ref();
const state = reactive<any>({
  typeTitle: "新增AVL厂商",
  formValue: {}
});
const { typeTitle, formValue } = toRefs(state);

// 表单校验规则
const rules = computed(() => ({
  name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  contact: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
  phone: [{ required: true, message: "电话不能为空", trigger: "blur" }],
  email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
  address: [{ required: true, message: "服务内容不能为空", trigger: "blur" }]
}));

// 打开弹窗
const openDialog = async () => {
  formRef.value.resetFields();
  if (props.drawerType === "add") {
    typeTitle.value = "新增AVL厂商";
    formValue.value = {};
  } else if (props.drawerType === "edit") {
    typeTitle.value = "编辑AVL厂商";
    formValue.value = props.rowData;
  }
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};
// 提交
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      const params: any = {};
      if (props.drawerType === "add") {
        params.name = formValue.value.name;
        params.avlNo = formValue.value.avlNo;
        params.contact = formValue.value.contact;
        params.phone = formValue.value.phone;
        params.email = formValue.value.email;
        params.address = formValue.value.address;
        params.remark = formValue.value.remark;
        await addMaterialSupplier(params);
        PxMessage.success("新增AVL厂商成功");
      } else if (props.drawerType === "edit") {
        params.code = props.rowData.code;
        params.name = formValue.value.name;
        params.avlNo = formValue.value.avlNo;
        params.contact = formValue.value.contact;
        params.phone = formValue.value.phone;
        params.email = formValue.value.email;
        params.address = formValue.value.address;
        params.remark = formValue.value.remark;
        await updateMaterialSupplier(params);
        PxMessage.success("修改AVL厂商成功");
      }
      emits("closeDialog");
    }
  });
};
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/add-dialog.scss");
</style>
